<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html >
<html>
<head>
<meta charset="UTF-8">
<title>新员工登记</title>
<!-- JQuery DataTable Css -->
<link
	href="${pageContext.request.contextPath }/static/plugins/jquery-datatable/skin/bootstrap/css/dataTables.bootstrap.css"
	rel="stylesheet">
<%@ include file="../layout/styles.jsp"%>
</head>
<body>
	<%@ include file="../layout/tools.jsp"%>

	<!-- Top Bar -->
	<%@ include file="../layout/top.jsp"%>
	<!-- #Top Bar -->

	<section>
		<%@ include file="../layout/scripts.jsp"%>
		<!-- Left Sidebar -->
		<%@ include file="../layout/leftsidebar.jsp"%>
		<!-- #END# Left Sidebar -->

		<!-- Right Sidebar -->
		<%@ include file="../layout/rightsidebar.jsp"%>
		<!-- #END# Right Sidebar -->
	</section>
	<section class="content">
		<div class="container-fluid">
			<div class="block-header">
				<h2>仪表盘</h2>
			</div>

			<!-- 表格内容 -->
			<div class="row clearfix">

				<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
					<div class="card">
						<div class="header">
							<h2>EXPORTABLE TABLE</h2>
							<ul class="header-dropdown m-r--5">
								<li class="dropdown"><a href="javascript:void(0);"
									class="dropdown-toggle" data-toggle="dropdown" role="button"
									aria-haspopup="true" aria-expanded="false"> <i
										class="material-icons">more_vert</i>
								</a>
									<ul class="dropdown-menu pull-right">
										<li><a href="javascript:void(0);" data-toggle="new"><i
												class="fa fa-plus fa-fw"></i> 新增</a></li>
										<li><a href="javascript:void(0);">Another action</a></li>
										<li><a href="javascript:void(0);">Something else here</a></li>
									</ul></li>
							</ul>
						</div>
						<div class="body">
							<div class="table-responsive">
								<table class="table table-bordered table-hover">

								</table>

							</div>
						</div>
					</div>
				</div>
			</div>

		</div>
	</section>
	
	  <script src="${pageContext.request.contextPath }/static/plugins/jquery-datatable/jquery.dataTables.js"></script>
    <script src="${pageContext.request.contextPath }/static/plugins/jquery-datatable/skin/bootstrap/js/dataTables.bootstrap.js"></script>
    
</body>
<script>
	$(function() {
		$('.table').DataTable({
			responsive : true,
			paging : true, // 是否启用分页
			lengthMenu : [ 10, 20, 30, 45, 60 ],// 分页的选择项
			 columnDefs : [ {
				targets : 4,
				render : function(cellValue, type, rowData, opts) {
					if (cellValue == 0) {
						return '在职'
					} else if (cellValue == 1) {
						return '不在职'
					}
				}
			},{
				targets : 3,
				render : function(cellValue, type, rowData, opts) {
					if (cellValue == 0) {
						return '启用'
					} else if (cellValue == 1) {
						return '禁用'
					}
				}
			},{
				targets : 5,
				render : function(cellValue, type, rowData, opts) {
					if (cellValue == 0) {
						return '管理员'
					} else if (cellValue == 1) {
						return '后台用户'
					}else if (cellValue ==2){
						return '普通用户'
					}
				}
			},{
				targets : 6,
				render : function(cellValue, type, rowData, opts) {
						return '<button onclick="quit(this)">修改</button> <button>删除</button>'
			
			} 
			}
			
			 ], 
			columns : [ {
				data : 'id',
				title : '编号'
			}, {
				data : 'account',
				title : '用户名'
			}, {
				data : 'password',
				title : '密码'
			}, {
				data : 'status',
				title : '状态'
			}, {
				data : 'deleted',
				title : '是否删除'
			}, {
				data : 'type',
				title : '类型'
			},
				{data:'null',
				 title:'操作'
				}
			],

			processing : true,
			serverSide : true,
			 ajax: {
 	        	url: '${pageContext.request.contextPath }/system/user.json',
 	        	type: 'post',
 	        	contentType: 'application/json;charset=UTF-8',
 	        	data: function(data){
 	        		return JSON.stringify(data);
 	        	}
 	        },
			language : {
				lengthMenu : '显示 _MENU_ 条数据',
				search : '搜索',
				//info: '当前显示0-10条数据,共100条数据',
				"info" : "显示 _START_ 到 _END_ 条数据, 共 _TOTAL_ 条数据",
				"infoEmpty" : "显示 0 到 0 条数据 ,共0条数据",
				"infoFiltered" : "(filtered from _MAX_ total entries)",
				"infoPostFix" : "",
				paginate : {
					"first" : "首页",
					"last" : "尾页",
					"next" : "下一页",
					"previous" : "上一页",
				}
			}

		});

		// 绑定事件---start

		$('a[data-toggle="new"]').on('click', function() {
			$.get('/system/user/new', function(html) {
				var dialog = bootbox.dialog({
					title : '<i class="fa fa-sitemap"></i> 新增资源',
					message : html,
					show : false,
					closeButton : false,
					className : 'xxxxxxxxxxxxx',
					buttons : {
						ok : {
							label : '确定',
							className : 'btn-link waves-effect',
							callback : function() {
								// 使用Ajax提交模态框中的表单
								var $form = $(this).find('form');
								$.ajax({
									url : $form[0].action,
									type : 'post',
									dataType : 'json',
									data : $form.serialize(),
									success : function(result) {
										if (!result.success) {
											console.log(result.message[0]);
											$('#msg1').text(result.message[0]);
											return;
										}
										alert('成功');
										dialog.modal('hide');
									},
									error : function() {
										alert('错误');
									}
								});
								return false;
							}
						},
						cancel : {
							label : '取消',
							className : 'btn-link'
						}
					}

				});
				dialog.modal('show');
			});
			
		});
	});
		// 修改--
		var quit=function(elm){
		var $element=$(elm).parent().siblings();
	    	var account=$element.eq(1).html();
	    	var password=$element.eq(2).html();
	    	var status=$element.eq(3).html();
	    	var deleted=$element.eq(4).html();
	    	var type=$element.eq(5).html();
	    	
 	    	$.get('/system/user/quit',function(html){
	    		var dialog = bootbox.dialog({
    	    		title: '<i class="fa fa-sitemap"></i> 新增资源',
    	    		message: html,
    	    		show: false,
    	    		closeButton: false,
    	    		className: 'xxxxxxxxxxxxx',
    	    		buttons:{
    	    			ok:{
    	    				label: '确定',
    	    				className: 'btn-link waves-effect',
    	    				callback: function(){
    	    					// 使用Ajax提交模态框中的表单
    	    					var $form = $(this).find('form');
    	    					$.ajax({
    	    						url: $form[0].action,
    	    						type: 'post',
    	    						dataType: 'json',
    	    						data: $form.serialize(),
    	    						success: function(result){
    	    							if(!result.success){
    	    								alert(result.message);
    	    								return;
    	    							}
    	    							alert('成功');
	    								dialog.modal('hide');
    	    						},
    	    						error: function(){
    	    							alert('错误');
    	    						}
    	    					});
    	    					
    	    					return false;
    	    				}
    	    			},
    	    			cancel:{
    	    				label: '取消',
    	    				className: 'btn-link'
    	    			}
    	    		}
    	    		
    	    	});
    	    	dialog.modal('show');
    	    	$('#account').val(account);
    	    	$('#password').val(password);
    	    	$('#status').val(status);
    	    	$('#deleted').val(deleted);
    	    	$('#type').val(type);
	    	});

		}
		
</script>
</html>